<template>
  <!-- 导师列表 -->
  <view class="page">
    <nav-bar
      :navTitle="title"
      iconColor="#000"
      :backgroundColor="backgroundColor"
      :isBackgroundColor="false"
    ></nav-bar>
    <view class="video"></view>
    <view class="introduce bg-white">
      <view class="titlePart">
        <view class="videoName col-225 fw-600 f-s-40">{{ videoName }}</view>
        <view class="studyNum f-s-20">{{ studyNum }}<text>已学习</text></view>
      </view>
      <view class="blurb flex justify-between">
        <view class="blurbLeft">
          <view class="flex">
            <view class="date f-s-24 col-3c3">{{ formData.date }}</view>
            <view class="watchNum f-s-24 col-3c3 flex align-center">
              <view class="reserve"></view>
              <text>{{ formData.watchNum }}</text>
            </view>
          </view>
          <view class="tips f-s-24 col-3c3">{{ formData.tips }}</view>
        </view>
        <view
          class="blurbRight flex flex-column align-center"
          @click="shiftEvent"
        >
          <image
            :src="joinStatus ? standardIn : notIn"
            class="starIcon"
            mode="scaleToFill"
          />
          <view class="joinTxt f-s-24 fw-600 col-225">{{
            joinStatus ? "已加入" : "加入学习"
          }}</view>
        </view>
      </view>
    </view>
    <view class="teacher flex mt20 align-center justify-between">
      <view class="leftPart flex align-center">
        <image
          src="https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/freeShipp.png"
          mode="scaleToFill"
          class="teacherImg"
        />
        <view class="teacherName f-s-28 fw-600 col-225">陈老师</view>
        <view class="identity f-s-20">专业讲师</view>
      </view>
      <image
        src="https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/merchant/forwardShow.png"
        class="forwardShow"
        mode="scaleToFill"
      />
    </view>
    <view class="bottomPart bg-white mt20">
      <view class="tabList flex align-center">
        <view
          class="tabName f-s-32 fw-600 col-3c3"
          :class="item.active ? 'col-225' : ''"
          v-for="(item, index) in tabList"
          @click="changeTab(item)"
          :key="index"
          ><text>{{ item.name }}</text>
          <view v-if="item.active" class="line"></view
        ></view>
      </view>
      <view class="explain" v-if="isMark">
        <view
          class="explainCard flex align-center borBottom"
          v-for="(item, index) in explainList"
          :key="index"
        >
          <image :src="item.img" class="explainImg" mode="scaleToFill" />
          <view class="reveal">
            <view>
              <view class="f-s-32 fw-600 col-225 text-one">{{
                item.layOut
              }}</view>
              <view class="col-3c3 f-s-24 mt5">{{ item.tips }}</view>
            </view>
            <view class="flex mt36">
              <view class="tag f-s-16">{{ item.studyNum }}</view>
              <view class="tag ml-16 f-s-16">{{ item.time }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="episodes" v-else>
        <view class="updateTips f-s-24 col-225 fw-600">{{ updateTips }}</view>
        <view
          class="episodesCard flex justify-between"
          v-for="(item, index) in episodesList"
          :key="index"
        >
          <view class="flex w85">
            <view class="preface f-s-32 fw-600 col-225">{{ item.num }}</view>
            <view class="txt ml-12 f-s-32 fw-600 col-225">{{
              item.tips
            }}</view></view
          >
          <view
            class="tryAndSee f-s-20 flex align-center justify-center"
            v-if="item.isFree"
            >试看</view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import navBar from "@/components/navBar";
import notIn from "./img/notIn.png";
import standardIn from "./img/standardIn.png";
export default {
  components: {
    navBar,
  },
  data() {
    return {
      title: "播放中心",
      backgroundColor: "#fff",
      videoName: "免费试看网格系统税务师训练营【名师好课拿证无忧】",
      studyNum: 65,
      notIn,
      standardIn,
      joinStatus: true,
      updateTips: "共5讲，已更新3讲",
      isMark: true, // true是其他可成、false是讲师目录
      tabList: [
        {
          name: "其他课程",
          active: true,
        },
        {
          name: "讲师目录",
          active: false,
        },
      ],
      episodesList: [
        {
          num: "01",
          tips: "基础入门课程税务/财会课程转战会 计行业",
          isFree: true,
        },
        {
          num: "02",
          tips: "入门课程基础第一篇第一课",
          isFree: false,
        },
        {
          num: "03",
          tips: "入门课程基础第一篇第一课",
          isFree: false,
        },
      ],
      explainList: [
        {
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/bigBanner8.png",
          layOut: "免费试看网格系统全方面解读税务知识",
          tips: "商业全案设计提升班",
          studyNum: "65人已学习",
          time: "时长 2小时",
        },
        {
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/bigBanner8.png",
          layOut: "免费试看网格系统全方面解读税务知识",
          tips: "商业全案设计提升班",
          studyNum: "65人已学习",
          time: "时长 2小时",
        },
        {
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/bigBanner8.png",
          layOut: "免费试看网格系统全方面解读税务知识",
          tips: "商业全案设计提升班",
          studyNum: "65人已学习",
          time: "时长 2小时",
        },
      ],
      formData: {
        date: "2025/05/27",
        watchNum: "1万人观看",
        tips: "跟着名师学习税务知识，让您赢在起跑线上。",
      },
    };
  },
  onLoad(options) {},
  methods: {
    shiftEvent() {
      this.joinStatus = !this.joinStatus;
    },
    changeTab(data) {
      if (data.name === "其他课程") this.isMark = true;
      else this.isMark = false;
      this.tabList.forEach((item) => {
        if (item.name === data.name) {
          item.active = true;
        } else {
          item.active = false;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.video {
  height: 462rpx;
  background: #79839a;
}
.introduce {
  padding: 58rpx 38rpx 40rpx 38rpx;
  .titlePart {
    position: relative;
  }
  .studyNum {
    position: absolute;
    right: 0rpx;
    bottom: 0rpx;
    width: 128rpx;
    height: 36rpx;
    text-align: center;
    line-height: 36rpx;
    background: #e9f0ff;
    border-radius: 10rpx;
    color: #2683e5;
  }
  .blurb {
    padding-top: 48rpx;
    .watchNum {
      margin-left: 66rpx;
    }
    .reserve {
      margin-right: 4rpx;
      width: 26rpx;
      height: 18rpx;
      background: #c3c3c3;
    }
    .tips {
      margin-top: 16rpx;
    }
    .blurbRight {
      .starIcon {
        width: 46rpx;
        height: 44rpx;
      }
      .joinTxt {
        margin-top: 4rpx;
      }
    }
  }
}
.teacher {
  padding: 0rpx 38rpx;
  height: 110rpx;
  background: #ffffff;
  .teacherImg {
    width: 72rpx;
    height: 72rpx;
    border-radius: 50%;
  }
  .teacherName {
    margin-left: 24rpx;
  }
  .identity {
    color: #a0a4aa;
    margin-left: 20rpx;
  }
  .forwardShow {
    width: 14rpx;
    height: 26rpx;
  }
}
.bottomPart {
  .tabList {
    text-align: center;
    height: 108rpx;
    border-bottom: 2rpx solid #dddddd;
    .tabName {
      height: 108rpx;
      line-height: 108rpx;
      position: relative;
      width: 50%;
    }
    .line {
      position: absolute;
      bottom: 0rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 58rpx;
      height: 6rpx;
      background: #61da7f;
      border-radius: 4rpx;
    }
  }
}
.borBottom {
  border-bottom: 2rpx solid #dddddd;
}
.explainCard {
  height: 288rpx;
  padding: 0rpx 38rpx;
  .explainImg {
    height: 200rpx;
    width: 308rpx;
    border-radius: 22rpx;
  }
  .reveal {
    flex: 1;
    margin-left: 32rpx;
    padding: 12rpx 0rpx;
  }
  .tag {
    line-height: 36rpx;
    text-align: center;
    width: 128rpx;
    color: #2683e5;
    height: 36rpx;
    background: #e9f0ff;
    border-radius: 10rpx;
  }
}
.episodes {
  padding-bottom: 40rpx;
  .updateTips {
    padding: 38rpx;
  }
  .episodesCard {
    padding: 36rpx 24rpx 36rpx 36rpx;
    margin: 20rpx 38rpx 0rpx 38rpx;
    background: #f9f9f9;
    border-radius: 24rpx;
  }
}
.tryAndSee {
  width: 70rpx;
  height: 40rpx;
  background: #ffe7e7;
  border-radius: 10rpx;
  color: #c11a1a;
}
.w85 {
  width: 85%;
}
.mt5 {
  margin-top: 5rpx;
}
.col-3c3 {
  color: #c3c3c3;
}
.col-225 {
  color: #212225 !important;
}
</style>
